import React, { FC, useCallback, useMemo } from 'react';
import { Table, DataSet } from 'choerodon-ui/pro';
import { expandedRowRendererProps } from 'choerodon-ui/pro/lib/table/Table';

import Record from 'choerodon-ui/pro/lib/data-set/Record';
import NestedTable from './NestedTable';

import getTableProps from './tableDataSet';

interface TableExpandProps {}

const columns = [
  { name: 'name' },
  { name: 'age' },
  { name: 'address' },
  {
    header: 'Action',
    render: () => <a onClick={() => alert('删除')}>Delete</a>,
  },
];

const TableNested: FC<TableExpandProps> = () => {
  const tableDs = useMemo(() => new DataSet(getTableProps()), []);
  const renderExpandRow = useCallback((record: Record) => {
    console.log(record);
    return <NestedTable />;
  }, []);
  return (
    <Table
      dataSet={tableDs}
      columns={columns}
      expandedRowRenderer={({record}: expandedRowRendererProps) => renderExpandRow(record)}
    />
  );
};

export default TableNested;
